<!-- 数据统计 -->
<template>
  <div class="m-3">
    <Card>
      <div class="text-xl pb-2 border-b border-solid border-[#E5E6EB]">数据总览</div>
      <div class="grid grid-cols-3 p-4 text-center">
        <div>
          <div>产品数量</div>
            <Statistic
            title="较昨日"
            :value="11.28"
            :precision="2"
            suffix="%"
            class="w-full"
            :value-style="{ color: '#3f8600' }"
            style="margin-top: 20px"
          >
            <template #prefix>
              <Icon icon="ion:arrow-up-outline" :size="24" />
            </template>
          </Statistic>
          <Statistic
            title="较上周"
            :value="9.3"
            :precision="2"
            suffix="%"
            class="w-full"
            :value-style="{ color: '#cf1322' }"
            style="margin-top: 20px"
          >
            <template #prefix>
              <Icon icon="ion:arrow-down-outline" :size="24" />
            </template>
          </Statistic>
          <Statistic
            title="较上月"
            :value="9.3"
            :precision="2"
            suffix="%"
            class="w-full"
            :value-style="{ color: '#cf1322' }"
            style="margin-top: 20px"
          >
            <template #prefix>
              <Icon icon="ion:arrow-down-outline" :size="24" />
            </template>
          </Statistic>
        </div>
        <div>
          <div>订单数</div>
        </div>
        <div>
          <div>销售额</div>
        </div>
      </div>
    </Card>
  </div>
</template>

<script lang="ts" setup>
  import { Card, Statistic } from 'ant-design-vue';
  import { Icon } from '@/components/Icon';
</script>

<style lang="less" scoped></style>
